<template>
  <div id="index" style="height:auto">
    <div>
      <el-carousel>
        <el-carousel-item v-for="item in 4" :key="item">
          <img class="img" src="../../assets/index/蒙版组 3.png" alt />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 新闻咨讯 -->
    <div class="newsConsulting">
      <div class="title">
        <img src="../../assets/index/组 5.png" alt />
      </div>
      <div class="newsNav">
        <div class="left">
          <div class="left-title">
            <span class="circle"></span>&nbsp;&nbsp;
            <span>行业新闻</span>
          </div>
          <div class="left-content">
            <img src="../../assets/index/蒙版组 2.png" alt />
            <div class="content">
              <p class="keynote">重磅！Facebook更名为“Meta”...</p>
              <p class="time">2021/10/29</p>
              <p class="introduce">
                伴随着此前Facebook已经透露改名
                的消息，在今天举行的Facebook...
              </p>
            </div>
          </div>
          <div class="left-content">
            <img src="../../assets/index/蒙版组 2.png" alt />
            <div class="content">
              <p class="keynote">重磅！Facebook更名为“Meta”...</p>
              <p class="time">2021/10/29</p>
              <p class="introduce">
                伴随着此前Facebook已经透露改名
                的消息，在今天举行的Facebook...
              </p>
            </div>
          </div>
          <div class="left-content">
            <img src="../../assets/index/蒙版组 2.png" alt />
            <div class="content">
              <p class="keynote">重磅！Facebook更名为“Meta”...</p>
              <p class="time">2021/10/29</p>
              <p class="introduce">
                伴随着此前Facebook已经透露改名
                的消息，在今天举行的Facebook...
              </p>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="right-title">
            <span class="circle"></span>&nbsp;&nbsp;
            <span>公司动态</span>
          </div>
          <div class="right-content">
            <img src="../../assets/index/蒙版组 2.png" alt />
            <div class="content">
              <p class="keynote">重磅！Facebook更名为“Meta”...</p>
              <p class="time">2021/10/29</p>
              <p class="introduce">
                伴随着此前Facebook已经透露改名
                的消息，在今天举行的Facebook...
              </p>
            </div>
          </div>
          <div class="right-content">
            <img src="../../assets/index/蒙版组 2.png" alt />
            <div class="content">
              <p class="keynote">重磅！Facebook更名为“Meta”...</p>
              <p class="time">2021/10/29</p>
              <p class="introduce">
                伴随着此前Facebook已经透露改名
                的消息，在今天举行的Facebook...
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 关于我们 -->
    <div class="aboutus">
      <div>
        <img src="../../assets/index/组 4.png" alt />
      </div>
      <div>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;四川聚选科技有限公司成立于2021年8月，注册资本5000万美元，是一家中越合资、由四川省成都市武侯区重点引进的外资企业。聚选秉承着助力实体、助农富农的宗旨，集采取缔中间商，保护商家收益，助力商家发展，帮助商家扩大产品销量，提高现金流量，而对于用户的全部消费实现免费化。</p>
        <p>
          &nbsp;&nbsp;&nbsp;通过“行为赚积分、积分抽大奖、分享得奖励、免费兑商品”四项设计步骤形成循环运营模式，用户在平台不需花费一分钱便可玩转积分商城，全面实现所有消费全免的同时还可体验沉浸式的兑换趣味。
        </p>
      </div>
    </div>
    <!-- 我们的优势 -->
    <div class="advantage">
      <div>
        <img src="../../assets/index/组 12.png" alt />
      </div>
      <div class="title">
        <div class="advantage-content">
          <div>
            <img class="advantage-img" src="../../assets/index/组 15.png" alt />
            <span>公司运营模式</span>
          </div>

          <div>&nbsp;&nbsp;通过“行为赚积分、积分抽大奖、分享得奖励、免费兑商品”四项设计步骤形成循环运营模式，用户在平台不需花费一分钱便可玩转积分商城，全面实现所有消费全免的同时还可体验沉浸式的兑换趣味。</div>
        </div>
        <div class="advantage-content">
          <div>
            <img class="advantage-img" src="../../assets/index/组 15.png" alt />
            <span>公司精神：破界创新、奉献价值</span>
          </div>

          <div>&nbsp;&nbsp;聚选坚持以人为本，诚信经营，取之于民，用之于民的原则，打破现有不良的商业格局，重构商业模型，使得用户、商家、平台多方价值回归，真正做到互利共赢，从而引领电子商务市场趋于良性循环发展</div>
        </div>
        <div class="advantage-content">
          <div>
            <img class="advantage-img" src="../../assets/index/组 15.png" alt />
            <span>我们的最终目的</span>
          </div>
          <div>&nbsp;&nbsp;
我们主要目的是为了孵化国产品牌，引导并帮助中小微企业在网上更便捷的建立自己的营销渠道，让企业借助源聚变这一平台快速打造品牌，提升企业品牌价值。</div>
        </div>
      </div>
    </div>
    <!-- 联系我们 -->
    <div class="relation">
      <div class="relation-img">
        <img src="../../assets/index/组 19.png" alt />
      </div>
      <div class="relation-box">
        <div class="left">
          <img src="../../assets/index/组 20.png" alt />
        </div>
        <div class="right">
              <el-input
            type="textarea"
            :rows="2"
            placeholder="请编辑您相对我们说的话，我们将尽快与您取得联系"
            v-model="textarea"
          ></el-input>
            <div class="ipt">
              <el-input placeholder="请输入你的名字" v-model="input" clearable></el-input>
              <el-input placeholder="请输入你的手机号" v-model="input" clearable></el-input>
            </div>
            <div class="ipt">
              <el-input placeholder="请输入你的邮箱" v-model="input" clearable></el-input>
              <el-input placeholder="请输入你的地址" v-model="input" clearable></el-input>
            </div>
            <button class="btn">提交</button>
        </div>
      </div>
    </div>
    <div class="beian">Copyright  2012-2022 江西聚变科技有限责任公司 备案号：<a href="http://beian.miit.gov.cn/">赣ICP备2021006566号</a></div>
    
  </div>
</template>
<script>
export default {
    components:{
    },
  data() {
    return {
      textarea: ""
    };
  }
};
</script>

<style lang="less" scoped>
.beian{
  font-size:0.22rem;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#000000;
}
.btn{
    width: 7.8rem;
    height: 0.5rem;
    border-radius: 5px;
    background-color:#ff7200;
    color: #ffffff;
    font-size: 0.22rem;
    border: none;
    margin-top:0.32rem ;
    margin-left:1rem;
}
/deep/.el-input{
    line-height: 0;
}
/deep/.el-input__inner{
    width: 59%;
    margin-top: 0.3rem;
}
.right {
    display: flex;
    flex-direction: column;
    .ipt {
      display: flex;
      padding: 0;
    }
  
}
/deep/.el-textarea__inner{
    min-height: 1.81rem!important;
}
/deep/.el-textarea {
  // font-family: '思源黑体';
  width: 9.7rem;
  padding: 0 !important;
  height: 1.81rem;
}
.relation {
  width: 100%;
  height: 6.5rem;
  margin-top: 0.7rem;
  margin-bottom: 1rem;
  background-image: url("../../assets/index/矩形 7.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .relation-img{
    text-align: center;
    padding: 52px 0 20px;
    img {
      display: inline-block;
      width: 1.36rem;
      height: 0.72rem;
    }
  }
 .relation-box {
    display: flex;
    .left {
      padding: 0;
      margin-left: 235px;
      width: 4rem;
      height: 3.03rem;
      img {
        width: 2.35rem;
        height: 3.03rem;
      }
    }
    .right {
      flex: 1;
    }
  }
}
.advantage {
  width: 100%;
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .title {
    display: flex;
    .advantage-content {
      flex-direction: column;
      padding: 0 0.5rem;
      display: flex;
      div:first-child {
        display: flex;
        align-items: center;
        justify-content: center;
        .advantage-img {
          width: 0.4rem;
          height: 0.4rem;
        }
        span {
          font-size: 0.34rem;
          line-height: 0.38rem;
          font-family: PingFang SC;
          color: #333333;
          margin-left: 0.2rem;
        }
      }
      div:last-child {
        margin-top: 0.39rem;
        font-size: 0.26rem;
        color: #000000;
        line-height: 0.32rem;
      }
    }
  }
  div:first-child {
    text-align: center;
    img {
      display: inline-block;
      width: 1.7rem;
      height: 0.72rem;
    }
  }
}
.aboutus {
  width: 100%;
  height: 6rem;
  margin-top: 0.7rem;
  background-image: url("../../assets/index/矩形 7.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  div:first-child {
    text-align: center;
    padding: 0.52rem 0 0.2rem;
    img {
      display: inline-block;
      width: 1.36rem;
      height: 0.72rem;
    }
  }
  div:last-child {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    p {
      width: 11.98rem;
      line-height: 0.38rem;
      font-size: 0.3rem;
      color: #ffffff;
    }
    p:last-child {
      margin-top: 0.3rem;
    }
  }
}
.content {
  flex: 1;
  margin-left: 0.11rem;
  line-height: 0.4rem;
  .keynote {
    font-size: 0.26rem;
    font-weight: bold;
    color: #000000;
  }
  .time {
    font-size: 0.2rem;
    color: #999999;
  }
  .introduce {
    font-size: 0.24rem;
    color: #333333;
  }
}
.circle {
  width: 0.18rem;
  height: 0.18rem;
  background-color: #ff7200;
  border-radius: 50%;
  display: inline-block;
}
.newsConsulting {
  padding: 0 1.7rem;
  margin-top: 1rem;
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.31rem;
  }
  .newsNav {
    display: flex;
    .left {
      display: flex;
      flex: 1;
      flex-direction: column;
      margin-right: 0.67rem;
      .left-title {
        height: 0.86rem;
        margin-bottom: 0.4rem;
        span:last-child {
          color: #333333;
          font-size: 0.24rem;
        }
      }
      .left-content {
        margin-bottom: 0.3rem;
        display: flex;
        img {
          width: 1.65rem;
          height: 1.7rem;
        }
      }
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      .right-title {
        height: 0.86rem;
        margin-bottom: 0.4rem;
        span:last-child {
          color: #333333;
          font-size: 0.24rem;
        }
      }
      .right-content {
        margin-bottom: 0.3rem;
        display: flex;
        img {
          width: 1.65rem;
          height: 1.7rem;
        }
      }
    }
  }
}
/deep/.el-carousel__container {
  height: 7.97rem;
}
.img {
  width: 100%;
  height: 100%;
}
/deep/.el-carousel__button {
  width: 0.24rem;
  height: 0.24rem;
  background-color: #ffffff;
  border-radius: 50%;
}
/deep/.el-carousel__indicator.is-active button {
  background-color: #ff7200;
}
</style>
